{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        tr{
            height: 35px;
            line-height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        td:first-child, th:first-child {
            position:sticky;
            left:0; /* 首行永远固定在左侧 */
            z-index:1;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #F5F5F5;
        }
        th:first-child{
            z-index:2;
        }
        .model_li{
            color: #3f414d;
            width: 25%;
            cursor: pointer;
            display: none;
        }
        .top_tag {
            border-bottom: #01AAED solid 2px;
            color: #01AAED;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div id="dispatch_detail_tab" onclick="change_mind('jurisdiction_list')" class="tab_top top_tag">
            我的待办
        </div>
        <div id="document_addressee_details_tab" onclick="change_mind('add_jurisdiction')" class="tab_top">
            我的已办
        </div>
    </div>


    <div id="jurisdiction_list" style="width: 100%;height: 93%;overflow: auto;background-color: white;">
        <div class="right-box" style="width: 100%;height: 95%;">
            <div style="height: 93%;width: 100%;overflow: auto;">
                <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;table-layout:fixed;">
                <thead>
                    <tr>
                        <th>申请人</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>用车事由</th>
                        <th>路线</th>
                        <th>状态</th>
                        <th>待审批</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody style="overflow: auto;" id="t_table">
                </tbody>
                <div id="img-display" style="width: 75%;text-align: center;position: fixed;display: none;">
                    <div style="margin-top: 10%;">
                        <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                        <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                    </div>
                </div>
            </table>
            </div>
            <hr>
            <div id="pagination" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
        </div>
    </div>

    <div id="add_jurisdiction" style="width: 100%;height: 93%;overflow: auto;display: none;background-color: white;">
        <div class="right-box" style="width: 100%;height: 95%;">
            <div style="height: 93%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                <table class="table table-hover table-bordered" style="border-collapse: collapse;width: 100%;table-layout:fixed;">
                    <thead>
                        <tr>
                            <th>申请人</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>用车事由</th>
                            <th>路线</th>
                            <th>状态</th>
                            <th>待审批</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody style="overflow: auto;" id="t_table1">
                    </tbody>
                </table>
                <div id="img-display1" style="width: 75%;text-align: center;position: fixed;display: none;">
                    <div style="margin-top: 10%;">
                        <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                        <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                    </div>
                </div>
            </div>
            <div id="pagination1" class="pagination" style="margin-left: 20px;margin-top: 1.5%;"></div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script>
        window.onload = function () {
            document.getElementById("sponsor").className = "add_class";
            document.getElementById("personage").className = "add-nav-active";
        };
        var ready_list = {{ ready_list | safe }};
        var already_list = {{ already_list | safe }};
        console.log(ready_list)
        function change_mind(ele_id) {
            if (ele_id === "jurisdiction_list") {
                document.getElementById("jurisdiction_list").style.display = "inline-block";
                document.getElementById("add_jurisdiction").style.display = "none";
                document.getElementById("dispatch_detail_tab").className = "tab_top top_tag";
                document.getElementById("document_addressee_details_tab").className = "tab_top";
            } else {
                document.getElementById("add_jurisdiction").style.display = "inline-block";
                document.getElementById("jurisdiction_list").style.display = "none";
                document.getElementById("dispatch_detail_tab").className = "tab_top";
                document.getElementById("document_addressee_details_tab").className = "tab_top top_tag";
            }
        }

        var t_table = document.getElementById("t_table");
        if (!ready_list.length){
            document.getElementById("img-display").style.display="inline-block";
        }
        pagenum(ready_list.length, 1);
        for (var i=0; i<ready_list.length; i++){
            var tr = document.createElement("tr");
            var td=document.createElement("td");var td1=document.createElement("td");var td2=document.createElement("td");var td3=document.createElement("td");var td4=document.createElement("td");var td5=document.createElement("td");var td6=document.createElement("td");var td7=document.createElement("td");
            console.log(ready_list[i]["state"]);
            if (ready_list[i]["state"] === "车管办分管领导已审批"){
                state = '完结';
            }else if (ready_list[i]["state"] === "拒绝"){
                state = "退回"
            }else {
                state = "审核中"
            }
            td.innerHTML=ready_list[i]["apply_user"];td1.innerHTML=ready_list[i]["start_time"];td2.innerHTML=ready_list[i]["end_time"];td3.innerHTML=ready_list[i]["subject"];td4.innerHTML=ready_list[i]["route"];td5.innerHTML=state;td6.innerHTML="<a href='Vehicle_apply_detail.html?id="+ready_list[i]["id"]+"'>审核</a>";td7.innerHTML=ready_list[i]["audit_user"];td7.style.color='red';
            td.style.textAlign="center";td1.style.textAlign="center";td2.style.textAlign="center";td3.style.textAlign="center";td4.style.textAlign="center";td5.style.textAlign="center";td6.style.textAlign="center";td7.style.textAlign="center";
            tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.appendChild(td7);tr.appendChild(td6);t_table.appendChild(tr);
        }

        var t_table1 = document.getElementById("t_table1");
        if (!already_list.length){
            document.getElementById("img-display1").style.display="inline-block";
        }
        pagenum1(already_list.length, 1);
        for (var j=0; j<already_list.length; j++){
            var state = "";
            var tr1 = document.createElement("tr");
            var td_0=document.createElement("td");var td_1=document.createElement("td");var td_2=document.createElement("td");var td_3=document.createElement("td");var td_4=document.createElement("td");var td_5=document.createElement("td");var td_6=document.createElement("td");var td_7=document.createElement("td");
            if (already_list[j]["state"] === "车管办分管领导已审批"){
                state = '完结';
            }else if (already_list[j]["state"] === "拒绝"){
                state = "退回"
            }else {
                state = "审核中"
            }
            td_0.innerHTML=already_list[j]["apply_user"];td_1.innerHTML=already_list[j]["start_time"];td_2.innerHTML=already_list[j]["end_time"];td_3.innerHTML=already_list[j]["subject"];td_4.innerHTML=already_list[j]["route"];td_5.innerHTML=state;td_6.innerHTML="<a href='Vehicle_apply_detail.html?type=already&id="+already_list[j]["id"]+"'>查看</a>";td_7.innerHTML=already_list[j]["audit_user"];td_7.style.color='red';
            td_0.style.textAlign="center";td_1.style.textAlign="center";td_2.style.textAlign="center";td_3.style.textAlign="center";td_4.style.textAlign="center";td_5.style.textAlign="center";td_6.style.textAlign="center";td_7.style.textAlign="center";
            tr1.appendChild(td_0);tr1.appendChild(td_1);tr1.appendChild(td_2);tr1.appendChild(td_3);tr1.appendChild(td_4);tr1.appendChild(td_5);tr1.appendChild(td_7);tr1.appendChild(td_6);t_table1.appendChild(tr1);
        }

        // 加载分页条
        function pagenum(dataTotals, page = 1) {
            new myPagination({
                id: 'pagination',
                curPage: page, //初始页码
                pageAmount: 20,  //每页多少条
                dataTotal: dataTotals, //总共多少条数据
                pageTotal: Math.ceil(parseInt(dataTotals, 10) / 20), //总页数
                pageSize: 5, //可选,分页个数
                showPageTotalFlag: true, //是否显示数据统计
                showSkipInputFlag: true, //是否支持跳转
                getPage: function (page) {
                    // var query_type = document.getElementById("query_type").value;
                    // var query_value = document.getElementById("query_value").value;
                    request_data(page, 1);
                }
            });
        }

        // 加载分页条
        function pagenum1(dataTotals = 1, page = 1) {
            new myPagination1({
                id: 'pagination1',
                curPage: page, //初始页码
                pageAmount: 20,  //每页多少条
                dataTotal: dataTotals, //总共多少条数据
                pageTotal: Math.ceil(parseInt(dataTotals, 10) / 20), //总页数
                pageSize: 5, //可选,分页个数
                showPageTotalFlag: true, //是否显示数据统计
                showSkipInputFlag: true, //是否支持跳转
                getPage: function (page) {
                    // var query_type = document.getElementById("query_type").value;
                    // var query_value = document.getElementById("query_value").value;
                    request_data(page, 2);
                }
            });
        }

    </script>
{% endblock %}




